const app = getApp();
Page({

  /**
   * 页面的初始数据
   */
  data: {
    w:0,
    h:0,
    h2:0,
    userInfo:{},//用户信息
    style_list:[
      {id:1, style_name:"全部", style_id:"all", isClick:true},
      {id:2, style_name:"可爱", style_id:"lovely", isClick:false},
      {id:3, style_name:"运动", style_id:"sport", isClick:false},
      {id:4, style_name:"水果", style_id:"fruit", isClick:false},
      {id:5, style_name:"女孩", style_id:"girl", isClick:false},
      {id:6, style_name:"化妆品", style_id:"makeUp", isClick:false},
      {id:7, style_name:"爱情", style_id:"heart", isClick:false},

    ],
    sticker_list:[],
  },
  /**
   * 点击上方style
   */
  style_click: function(e){
    var sticker_style= 'all'//用户打开的页面style
    let index = e.target.dataset.index;
    let temp_str = 'style_list['+index+'].isClick';
    let list = this.data.style_list;
    for(var i=0; i<list.length; i++){
      let temp_str2 = 'style_list['+i+'].isClick';
      if(list[i].isClick){
        this.setData({
          [temp_str2] : false
        })
      }
    };
    sticker_style = this.data.style_list[index].style_id
    this.setData({
      [temp_str] : true,
    });
    this.getData(list[index].style_id);
  },
  /**
   * 根据距离顶部的距离给stickerlist设置数量
   */
  getCount:function(e){ 
    var top = e.detail.scrollTop;
    let query = wx.createSelectorQuery();
    let height = 0//sticker的高度
    var length = 0//sticerde数量
    var style_id = ''//当前页面显示贴纸的风格
    this.data.style_list.map((item,index)=>{
      if(item.isClick){
        style_id = item.style_id
      }
    })
    query.select('.sticker').boundingClientRect(rect=>{
      height = rect.height;
    }).exec();
    var url = '';
    if(!app.globalData.hasUserInfo){
      if(style_id!='all'){
        url = `${app.globalData.url}/shop/styleSti/${style_id}`//用户没有登陆 各风格贴纸接口
      }else{
        url = 'https://www.h5fd.xyz:2021/shop/showSti'
      }
    }else{
      if(style_id!=='all'){
        url = `${app.globalData.url}/shop-user/styleSti/${style_id}`//用户登录 风格不为‘all'的贴纸接口
      }else{
        url = 'https://www.h5fd.xyz:2021/shop-user/showSti'
      }
    }
    wx.request({
      url:url,
      header:{'Content-Type':'application/x-www-from-urlencoded','authorization':`${wx.getStorageSync('login_key')}`},
      success: res => {
        if(res.statusCode==200){
          res.data.sticker.map((item)=>{
            item.isGet="获取"
            if(app.globalData.hasUserInfo){
              for(let i=0; i<res.data.user_own.length; i++){
                if(item.sticker_id==res.data.user_own[i].sticker_id){
                  item.isGet="已获取"
                }
              }
            }
          })
          length = res.data.sticker.length  
          for(let i=0; i<Math.ceil(length/9);i++){
            if(this.data.sticker_list.length<=9*(i+2)){//减少不必要的循环
              if(3*i*height<top&&top<3*(i+1)*height){
                if(length<9*(i+2)){
                  this.data.sticker_list.length = length;   
                }else{
                  if(this.data.sticker_list.length<9*(i+2)){//数组长度变多后不必再变少
                    this.data.sticker_list.length = 9*(i+2); 
                  }
                }
              } 
            }
          }
          console.log(this.data.sticker_list.length)
          this.setData({
            sticker_list: res.data.sticker.slice(0,this.data.sticker_list.length),
          })
        }
      },
      faile:err => {
        console.error(err)
      }
    })
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    this.setData({
      userInfo:app.globalData.userInfo,
      w:app.globalData.w,
      h:app.globalData.h,
      h2:app.globalData.h2,
    })
    this.data.sticker_list.length = 18//最少素材库要有18个贴纸
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
    var url =''
    if(!app.globalData.hasUserInfo){
      url = `${app.globalData.url}/shop/showSti`
    }else{
      url =`${app.globalData.url}/shop-user/showSti`
    }
    wx.request({
      url:url,
      header:{'Content-Type':'application/x-www-from-urlencoded','authorization':`${wx.getStorageSync('login_key')}`},
      success: res => {
        console.log(res)
        if(res.statusCode==200){
          res.data.sticker.map((item)=>{
            item.isGet="获取"
            if(app.globalData.hasUserInfo){
              for(let i=0; i<res.data.user_own.length; i++){
                if(item.sticker_id==res.data.user_own[i].sticker_id){
                  item.isGet="已获取"
                }
              }
            }
          })
          this.setData({
            sticker_list: res.data.sticker.slice(0,this.data.sticker_list.length),
          })            
        }
      },
      faile:err => {
        console.error(err)
      }
    })
  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  },
  /**
   * 用户点击分类按钮获得数据
   */
  getData: function(style_id){
    if (!app.globalData.hasUserInfo){
      wx.request({
        url:`${app.globalData.url}/shop/styleSti/${style_id}`,
        success: res => {
          if(res.statusCode==200){
            res.data.sticker.map((item)=>{
              item.isGet="获取"
            })
            this.setData({
              sticker_list : res.data.sticker,
            })
          }
        },
        faile:err => {
          console.error(err)
        }
      })
    }else{
     this.updataSticker(style_id)
    }
  },
  /**
   * 用户点击获取 获取贴纸
   */
  getSticker_click: function(e){
    if (!app.globalData.hasUserInfo) {
      wx.showModal({
          title: '提示',
          content: '请先登录小程序',
          success: function (res) {
              if (res.confirm) { //这里是点击了确定以后
                  wx.switchTab({
                      url: '/pages/user/user',
                  })
              } else { //这里是点击了取消以后
                  console.log('用户点击取消');
              }
          }
        })
      } else { 
        let index = e.target.dataset.index;
        this.getSticker(this.data.sticker_list[index]);
      }
  },
  //点击获取
  getSticker: function(sticker){
    wx.request({
      url:`${app.globalData.url}/shop-user/getSti/${sticker.sticker_id}`,
      header:{'Content-Type':'application/x-www-from-urlencoded','authorization':`${wx.getStorageSync('login_key')}`},
      success:res=>{
        console.log(res)
        if(res.statusCode===200){
          if(res.data=="coin don't enough"){
            wx.showToast({
              title: '拾光币不足哦', // 标题
              duration: 1500  // 提示窗停留时间，默认1500ms
            })
          }else if(res.data=="您已经有啦！"){
            wx.showToast({
              title: '你已经拥有了哦', // 标题
              duration: 1500  // 提示窗停留时间，默认1500ms
            })
          }else if(res.data.result=="success"){
            app.globalData.userInfo.user_coin=res.data.now_coin
            this.setData({
              userInfo:app.globalData.userInfo
            })
            wx.showToast({
              title: '获取成功', // 标题
              duration: 1500  // 提示窗停留时间，默认1500ms
            })
            this.updataSticker(sticker.sticker_style);
          }
        }
      }
    })
  },
  //得到所有贴纸和已有贴纸信息
  updataSticker:function(sticker_style){
    var url =''
    if(sticker_style=='all'){
      url = `${app.globalData.url}/shop-user/showSti`
    }else{
      url = `${app.globalData.url}/shop-user/styleSti/${sticker_style}`
    }
    wx.request({
      url:url,
      header:{'Content-Type':'application/x-www-from-urlencoded','authorization':`${wx.getStorageSync('login_key')}`},
      success: res => {
        if(res.statusCode==200){
          res.data.sticker.map((item)=>{
            item.isGet="获取"
            for(let i=0; i<res.data.user_own.length; i++){
              if(item.sticker_id==res.data.user_own[i].sticker_id){
                item.isGet="已获取"
              }
            }
          })
          this.setData({
            sticker_list : res.data.sticker,
          })
        }
      },
      faile:err => {
        console.error(err)
      }
    })
  }
})